Skip to content

Auto-hide labels of box fields nested in FormLayoutCustomField via context - #699

Merged
adamkudrna merged 1 commit into
masterfrom
docs/form-layout-custom-field
Jul 29, 2026
Merged

Auto-hide labels of box fields nested in FormLayoutCustomField via context#699
adamkudrna merged 1 commit into
masterfrom
docs/form-layout-custom-field

Conversation

@adamkudrna

@adamkudrna adamkudrna commented Mar 18, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Summary

  • Introduces FormLayoutCustomFieldContext and provides it from
    FormLayoutCustomField, so TextField, TextArea, SelectField, and
    FileInputField automatically hide their own label when nested inside
    FormLayoutCustomField — no more manual isLabelVisible={false} needed.
    This is a breaking change: any nested field that previously showed its
    own label will now always have it hidden, since FormLayout forces
    horizontal layout on all descendants and a visible nested label would
    conflict with the grid regardless of fieldLayout.
  • Adds a "Nested Fields Labels" section to the FormLayout README
    documenting the automatic behavior.
  • Adds labelWidth="100px" visual test coverage (via a real FormLayout
    wrapper) for Button, CheckboxField, FileInputField, Radio,
    SelectField, TextArea, TextField, and Toggle, and renames the
    previous 30px FormLayout label-width test case to the more representative
    100px.
  • Adds Button to the FormLayout story.
  • Removes now-redundant isLabelVisible={false} wiring from custom-field
    prop tests since label-hiding is now automatic.

@github-actions github-actions Bot added the documentation Improvements or additions to documentation label Mar 18, 2026
@adamkudrna adamkudrna mentioned this pull request Mar 18, 2026
Merged
@adamkudrna adamkudrna moved this to 👀 In review in The Board Mar 18, 2026
mbohal
mbohal requested changes Mar 19, 2026
View reviewed changes
Comment thread src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx
Comment thread src/components/FormLayout/README.md Outdated
@adamkudrna
adamkudrna force-pushed the feature/button-in-form-layout branch from d38a4ef to abdf6f8 Compare March 30, 2026 18:47
Base automatically changed from feature/button-in-form-layout to master March 30, 2026 20:55
@adamkudrna
adamkudrna force-pushed the docs/form-layout-custom-field branch from 2a8871d to 3354820 Compare March 30, 2026 21:09
@adamkudrna
adamkudrna temporarily deployed to pr-preview/pr-699 March 30, 2026 21:10 — with GitHub Actions Inactive
@github-actions

github-actions Bot commented Mar 30, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor
PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-07-29 19:19 UTC

@adamkudrna
adamkudrna force-pushed the docs/form-layout-custom-field branch from 3354820 to cafc0b6 Compare April 1, 2026 09:29
@adamkudrna
adamkudrna temporarily deployed to pr-preview/pr-699 April 1, 2026 09:30 — with GitHub Actions Inactive
@adamkudrna
adamkudrna force-pushed the docs/form-layout-custom-field branch from cafc0b6 to 588f31b Compare April 1, 2026 14:03
@adamkudrna adamkudrna changed the title Document that nested box fields in FormLayoutCustomField must hide their labels Auto-hide labels of box fields nested in FormLayoutCustomField via context Apr 1, 2026
@adamkudrna
adamkudrna temporarily deployed to pr-preview/pr-699 April 1, 2026 14:04 — with GitHub Actions Inactive
@adamkudrna adamkudrna added BC Breaking change and removed documentation Improvements or additions to documentation labels Apr 1, 2026
@adamkudrna
adamkudrna force-pushed the docs/form-layout-custom-field branch from 588f31b to 06bfda8 Compare April 1, 2026 14:30
@adamkudrna
adamkudrna requested a review from mbohal April 1, 2026 14:30
@adamkudrna
adamkudrna temporarily deployed to pr-preview/pr-699 April 1, 2026 14:31 — with GitHub Actions Inactive
@adamkudrna adamkudrna added the claude Ask Claude to perform code review. label Apr 1, 2026
@adamkudrna
adamkudrna force-pushed the docs/form-layout-custom-field branch from 06bfda8 to 3fd563d Compare April 1, 2026 15:26
@adamkudrna
adamkudrna temporarily deployed to pr-preview/pr-699 April 1, 2026 15:27 — with GitHub Actions Inactive
@adamkudrna adamkudrna added claude Ask Claude to perform code review. and removed claude Ask Claude to perform code review. labels Apr 1, 2026
Copilot AI reviewed Apr 4, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR introduces a FormLayoutCustomField-scoped context signal so that “box” fields nested inside FormLayoutCustomField automatically hide their own labels, reducing grid/alignment conflicts and removing the need for repetitive isLabelVisible={false} in consuming code and tests.

Changes:

  • Add FormLayoutCustomFieldContext and provide it from FormLayoutCustomField; update TextField/TextArea/SelectField/FileInputField to hide labels when the context is present.
  • Update FormLayout documentation to describe the nested-label behavior and adjust examples accordingly.
  • Expand/adjust Playwright visual coverage (including new labelWidth="100px" cases and new snapshots), and update stories/tests accordingly (including Button form-layout cases).

Reviewed changes

Copilot reviewed 32 out of 60 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
src/components/Toggle/tests/Toggle.story.tsx Adds a FormLayout label-width test story wrapper for Toggle.
src/components/Toggle/tests/Toggle.spec.tsx Adds visual snapshot test for labelWidth="100px" scenario.
src/components/Toggle/tests/Toggle.spec.tsx-snapshots/Toggle-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png Adds new visual snapshot for Toggle label width.
src/components/TextField/TextField.jsx Hides TextField label when inside FormLayoutCustomField via new context.
src/components/TextField/tests/TextField.story.tsx Adds stories for FormLayout label width and FormLayoutCustomField label-hidden scenario.
src/components/TextField/tests/TextField.spec.tsx Adds visual tests for label width and FormLayoutCustomField label-hidden scenario.
src/components/TextField/tests/TextField.spec.tsx-snapshots/TextField-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png Adds new TextField label width snapshot.
src/components/TextField/tests/TextField.spec.tsx-snapshots/TextField-formLayoutCustomField-visual-label-hidden-1-chromium-linux.png Adds new TextField nested-label-hidden snapshot.
src/components/TextArea/TextArea.jsx Hides TextArea label when inside FormLayoutCustomField via new context.
src/components/TextArea/tests/TextArea.story.tsx Adds stories for FormLayout label width and FormLayoutCustomField label-hidden scenario.
src/components/TextArea/tests/TextArea.spec.tsx Adds visual tests for label width and FormLayoutCustomField label-hidden scenario.
src/components/TextArea/tests/TextArea.spec.tsx-snapshots/TextArea-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png Adds new TextArea label width snapshot.
src/components/TextArea/tests/TextArea.spec.tsx-snapshots/TextArea-formLayoutCustomField-visual-label-hidden-1-chromium-linux.png Adds new TextArea nested-label-hidden snapshot.
src/components/SelectField/SelectField.jsx Hides SelectField label when inside FormLayoutCustomField via new context.
src/components/SelectField/tests/SelectField.story.tsx Adds stories for FormLayout label width and FormLayoutCustomField label-hidden scenario.
src/components/SelectField/tests/SelectField.spec.tsx Adds visual tests for label width and FormLayoutCustomField label-hidden scenario.
src/components/SelectField/tests/SelectField.spec.tsx-snapshots/SelectField-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png Adds new SelectField label width snapshot.
src/components/SelectField/tests/SelectField.spec.tsx-snapshots/SelectField-formLayoutCustomField-visual-label-hidden-1-chromium-linux.png Adds new SelectField nested-label-hidden snapshot.
src/components/Radio/tests/Radio.story.tsx Adds a FormLayout label-width test story wrapper for Radio.
src/components/Radio/tests/Radio.spec.tsx Adds visual snapshot test for labelWidth="100px" scenario.
src/components/Radio/tests/Radio.spec.tsx-snapshots/Radio-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png Adds new Radio label width snapshot.
src/components/FormLayout/README.md Documents nested-field label auto-hiding and updates examples accordingly.
src/components/FormLayout/index.js Exports FormLayoutCustomFieldContext from the FormLayout barrel.
src/components/FormLayout/FormLayoutCustomFieldContext.js Introduces new context used to signal “inside custom field”.
src/components/FormLayout/FormLayoutCustomField.jsx Provides FormLayoutCustomFieldContext to descendants.
src/components/FormLayout/tests/FormLayoutCustomField.story.tsx Minor import reordering for tests/stories.
src/components/FormLayout/tests/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-labelVisible-boolean-true-fieldLayout-string-horizontal-1-chromium-linux.png Updates/introduces snapshot for horizontal custom-field visuals.
src/components/FormLayout/tests/FormLayout.story.tsx Adds Button to FormLayout test story composition.
src/components/FormLayout/tests/FormLayout.spec.tsx-snapshots/FormLayout-base-visual-labelWidth-string-auto-1-chromium-linux.png Updates snapshot due to story/layout changes.
src/components/FormLayout/tests/_propTests/labelWidthPropTest.ts Renames label width test case from 30px to 100px and updates props.
src/components/FormLayout/tests/_propTests/customFieldTests/customFieldValidationStatesPropTest.ts Removes nested-field isLabelVisible wiring (now context-driven).
src/components/FormLayout/tests/_propTests/customFieldTests/customFieldValidationStatesDisabledPropTest.ts Removes nested-field isLabelVisible wiring (now context-driven).
src/components/FormLayout/tests/_propTests/customFieldTests/customFieldRequiredPropTest.ts Removes nested-field isLabelVisible wiring (now context-driven).
src/components/FormLayout/tests/_propTests/customFieldTests/customFieldLabelAlignmentPropTest.ts Removes label-visibility variants; leaves simplified cases.
src/components/FormLayout/tests/_propTests/customFieldTests/customFieldFullWidthPropTest.ts Removes nested-field isLabelVisible wiring (now context-driven).
src/components/FileInputField/FileInputField.jsx Hides FileInputField label when inside FormLayoutCustomField via new context.
src/components/FileInputField/tests/FileInputField.story.tsx Adds stories for FormLayout label width and FormLayoutCustomField label-hidden scenario.
src/components/FileInputField/tests/FileInputField.spec.tsx Adds visual tests for label width and FormLayoutCustomField label-hidden scenario.
src/components/FileInputField/tests/FileInputField.spec.tsx-snapshots/FileInputField-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png Adds new FileInputField label width snapshot.
src/components/FileInputField/tests/FileInputField.spec.tsx-snapshots/FileInputField-formLayoutCustomField-visual-label-hidden-1-chromium-linux.png Adds new FileInputField nested-label-hidden snapshot.
src/components/CheckboxField/tests/CheckboxField.story.tsx Adds a FormLayout label-width test story wrapper for CheckboxField.
src/components/CheckboxField/tests/CheckboxField.spec.tsx Adds visual snapshot test for labelWidth="100px" scenario.
src/components/CheckboxField/tests/CheckboxField.spec.tsx-snapshots/CheckboxField-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png Adds new CheckboxField label width snapshot.
src/components/Button/tests/Button.story.tsx Adds context-driven FormLayout tests for Button; updates FormLayout stories to include TextField context.
src/components/Button/tests/Button.spec.tsx Adds FormLayout context-based visual tests using propTests.layoutPropTest.
src/components/Button/tests/Button.spec.tsx-snapshots/Button-formLayout-visual-layout-string-vertical-1-chromium-linux.png Adds snapshot for Button layout via context (vertical).
src/components/Button/tests/Button.spec.tsx-snapshots/Button-formLayout-visual-layout-string-horizontal-1-chromium-linux.png Adds snapshot for Button layout via context (horizontal).
src/components/Button/tests/Button.spec.tsx-snapshots/Button-formLayout-visual-vertical-1-chromium-linux.png Updates/adds vertical FormLayout button snapshot.
src/components/Button/tests/Button.spec.tsx-snapshots/Button-formLayout-visual-horizontal-1-chromium-linux.png Updates/adds horizontal FormLayout button snapshot.
src/components/Button/tests/Button.spec.tsx-snapshots/Button-formLayout-visual-vertical-1-chromium-linux.png Adds/updates snapshot coverage for vertical layout variant.
Comments suppressed due to low confidence (1)

src/components/FormLayout/tests/_propTests/customFieldTests/customFieldLabelAlignmentPropTest.ts:32

  • customFieldLabelAlignmentPropTest still uses test names like labelVisible:boolean=false ..., but the test case no longer sets isLabelVisible: false (and in fact the nested field label is now always hidden via FormLayoutCustomFieldContext). This makes the test name misleading and harder to interpret; consider renaming these cases to reflect the new behavior (e.g. nestedLabel:hidden ...) or reintroducing the prop if you still want to cover it explicitly.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/components/FormLayout/FormLayoutCustomField.jsx
Comment thread src/components/FormLayout/README.md Outdated
bedrich-schindler
bedrich-schindler reviewed Apr 4, 2026
View reviewed changes
Comment thread src/components/Radio/__tests__/Radio.story.tsx
adamkudrna

This comment was marked as outdated.

Sign in to view

@adamkudrna
adamkudrna force-pushed the docs/form-layout-custom-field branch from 3fd563d to febdea1 Compare July 1, 2026 16:51
@adamkudrna
adamkudrna temporarily deployed to pr-preview/pr-699 July 1, 2026 16:53 — with GitHub Actions Inactive
mbohal
mbohal requested changes Jul 2, 2026
View reviewed changes
Comment thread src/components/Button/__tests__/Button.story.tsx Outdated
Comment thread ...ayout.spec.tsx-snapshots/FormLayout-base-visual-autoWidth-boolean-false-1-chromium-linux.png Outdated
@adamkudrna
Auto-hide labels of box fields nested in FormLayoutCustomField via …
071ede9 
…context

Creates `FormLayoutCustomFieldContext` and has `FormLayoutCustomField` provide
it to its children. `TextField`, `TextArea`, `SelectField`, and
`FileInputField` consume the context to automatically hide their labels when
rendered inside a `FormLayoutCustomField`, making the behavior a hard rule
rather than a recommendation.

Updates the `FormLayout` README to reflect the automatic behavior and removes
all now-redundant `isLabelVisible={false}` from code examples. Removes the
prop from `FormLayoutCustomField` test fixtures and the `FormLayout` story
accordingly.

Also adds per-component `formLayout` test coverage for `labelWidth` and the
new `formLayoutCustomField` visual tests to `TextField`, `TextArea`,
`SelectField`, `FileInputField`, `Button`, `CheckboxField`, `Radio`, and
`Toggle`.
@adamkudrna
adamkudrna force-pushed the docs/form-layout-custom-field branch from febdea1 to 071ede9 Compare July 29, 2026 19:08
@adamkudrna
adamkudrna requested a review from mbohal July 29, 2026 19:09
@adamkudrna
adamkudrna merged commit 4b8a416 into master Jul 29, 2026
14 checks passed
@adamkudrna
adamkudrna deleted the docs/form-layout-custom-field branch July 29, 2026 19:19
@github-project-automation github-project-automation Bot moved this from 👀 In review to ✅ Done in The Board Jul 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments
@bedrich-schindler bedrich-schindler Awaiting requested review from bedrich-schindler
@mbohal mbohal Awaiting requested review from mbohal

Assignees

@adamkudrna adamkudrna

Labels

BC Breaking change claude Ask Claude to perform code review.

Projects

The Board
Archived in project

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@adamkudrna @mbohal @bedrich-schindler